<template>
	<view 
		class="container" 
		:style="{
			background: 'url(' + $u.$assets.GradientBackground + ') no-repeat, #FFFFFF',
			backgroundSize: '1480rpx auto',
			backgroundPosition: '-420rpx -360rpx'
		}"
	>
		<view class="user" v-if="isLogin"  @click="$u.route('/pages/user/info/user')">
			
			<u-avatar size="166rpx" :src="$imgurl(userInfo.wx_img)"></u-avatar>
			<view class="user-msg">
				<view class="user-title">
					<text class="user-nikename">{{ $text(userInfo.wx_name) }}</text>
				</view>
				<text class="user-mobile">{{ $text(userInfo.tel) }}</text>
			</view>
		</view>
		
		<view class="user" v-else>
			<u-avatar size="166rpx"></u-avatar>
			<view class="out-login" @click="navLogin()">
				<text class="login-title">{{ this.$t('user.loginTip') }}</text>
			</view>
		</view>
		
		<gy-home-menu class="menu"></gy-home-menu>

		<view class="footer-cell">
			<u-cell-group :border="false" >
				<u-cell 
					v-for="(item,index) in cellList"
					:title="item.title" 
					:icon="item.icon" 
					:border="false"
					:iconStyle="cellIconStyle"
					:titleStyle="cellTitleStyle"
					:key="item.key"
					clickable
					@click="cellClick(item, index)"
				></u-cell>
			</u-cell-group> 
		</view>
		
	</view>
</template>

<script> 
const app = getApp()
export default {
	data() {
		return {
			title: '个人中心',
			cellIconStyle: {
				width: '36rpx',
				height: '36rpx'
			},
			cellTitleStyle: {
				fontSize: '32rpx',
				color: 'rgba(51, 51, 51, 1)',
				fontWeight: '400',
				marginLeft: '20rpx'
			}
		}
	},
	onLoad() {
		
	},
	onShow() {
		this.init()
	},
	computed: {
		cellList(){
			return [
				{ key: "Information", title: this.$t('user.cell.title1'), icon: 'order', path: '' },
				{ key: "Collect", title: this.$t('user.cell.title2'), icon: 'order', path: '' },
				{ key: "CustomerService", title: this.$t('user.cell.title3'), icon: 'order' },
				{ key: "About", title: this.$t('user.cell.title4'), icon: 'order', path: '' },
			]
		},
		isLogin(){
			return this.$u.vuex.getters('user/hasLogin')
		},
		userInfo(){
			return this.$u.vuex.get('user.userInfo')
		}
	},
	methods: {
		init(){
			if(this.isLogin){
                
				// 获取用户信息
				this.$u.vuex.dispatch('user/getUserInfo')
			}
		},
		cellClick(item){
            switch(item.key){
                // 拨打电话
                case 'CustomerService':
                    uni.makePhoneCall({
                    	phoneNumber: app.globalData.gyConfig.sysphone //仅为示例
                    });
                break
                default:
                    this.$u.route(item.path)
            }
			
		},
		navLogin(){
			this.$u.route('/pages/user/login/login')
		},
		// 获取用户微信信息
		getUserProfile(){
			this.$u.vuex.dispatch('user/saveUserProfile')
		}
	}
}
</script>

<style lang="scss">
.container {
	@include flex-center;
	padding-top: 120rpx;
	
	.user{
		display: flex;
		justify-content: space-between;
		width: 614rpx;
		
		.user-msg{
			flex: 1;
			margin-left: 20rpx;
			
			.user-title{
				margin-top: 20rpx;
				overflow: hidden;

				.user-nikename{
					float: left;
					margin-right: 15rpx;
					font-size: 46rpx;
					font-weight: 700;
					letter-spacing: 0px;
					line-height: 66.61rpx;
					color: rgba(51, 51, 51, 1);
					text-align: center;
					vertical-align: middle;
				}
				
			}

			.user-mobile{
				margin-top: 10rpx;
				font-size: 32rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				line-height: 43.9rpx;
				color: rgba(153, 153, 153, 1);
			}
		}
		
		.out-login{
			flex: 1;
			margin-left: 20rpx;
			line-height: 166rpx;
			
			.login-title{
				font-size: 46rpx;
				font-weight: 700;
				letter-spacing: 0px;
				line-height: 66.61rpx;
				color: rgba(51, 51, 51, 1);
			}
		}
	}
	
	.menu{
		width: 670rpx;
	}
	
	.card-menu{
		display: flex;
		justify-content: space-between;
		margin-top: 77rpx;
		
		.card-menu-l,
		.card-menu-r{
			display: flex;
			align-items: center;
			width: 316rpx;
			min-height: 133rpx;
			padding: 10rpx 20rpx 20rpx 43rpx;
			border-radius: 20rpx;
			
			.card-menu-img{
				width: 53rpx;
				height: 53rpx;
			}
			
			.card-menu-txt{
				flex: 1;
				width: 0;
				margin-left: 24rpx;
				
				.card-menu-txt-1{
					font-size: 36rpx;
					font-weight: 400;
					color: rgba(255, 255, 255, 1);
					vertical-align: middle;
				}
				
				.card-menu-txt-2{
					margin-top: 6rpx;
					font-size: 20rpx;
					font-weight: 300;
					line-height: 27.44rpx;
					color: rgba(255, 255, 255, 1);
				}
			}
		}
		
		.card-menu-l{
			margin-right: 34rpx;
			background: rgba(255, 147, 130, 1);
			box-shadow: 0rpx 0rpx 23rpx  rgba(255, 147, 130, 0.3);
		}
		
		.card-menu-r{
			background: rgba(186, 203, 255, 1);
			box-shadow: 0rpx 0rpx 32rpx  rgba(186, 203, 255, 0.4);
		}
	}
	
	.footer-cell{
		width: 700rpx;
		margin-top: 80rpx;
	}
}

</style>
